import React, {Component, Suspense, lazy} from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';

// 懒加载组件
const Login = lazy(() => import('./pages/Login'));
const Home = lazy(() => import('./pages/Home'));

//获取本地存储的管理员数据
let mmallUser;
if (localStorage.mmallUser) {
	mmallUser = JSON.parse(localStorage.getItem('mmallUser'));
}

// 外层容器组件
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			mmallUser
		}
	}

	// 管理员登录成功，并设置数据
	change = data => {
		this.setState({
			mmallUser: data
		});
	};

	// 退出登录，清空数据，并删除本地存储
	closeLogin = () => {
		this.setState({
			mmallUser: null
		});
		localStorage.removeItem('mmallUser');
	};

	render() {
		return (
			<Router>
				<Suspense fallback={<div>loading</div>}>
					<Switch>
						{/*始终允许进入login页面，传递管理员用户数据，传递修改管理员数据的方法，传递退出登录的方法*/}
						<Route path="/login"
						       render={props => <Login {...props}
						                               change={this.change}
						                               closeLogin={this.closeLogin}
						                               mmallUser={this.state.mmallUser}/>}/>
						{
							// 如果localStorage没有管理员数据，或者管理员没有登录，始终跳回到login页面
							!this.state.mmallUser ?
								<Redirect from="*" to="/login"/>
								:
								// 如果有管理员数据，或者登录成功，允许渲染首页
								<Route path="/" render={(props) => <Home {...props} />}/>
						}
					</Switch>
				</Suspense>
			</Router>
		);
	}
}

export default App;